import type { ResizeCallbackData } from 'react-resizable'
import { Resizable } from 'react-resizable'
// import css from './index.less'

const Index = (
  props: React.HTMLAttributes<any> & {
    onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void
    width: number
  }
) => {
  const { onResize, width, ...restProps } = props

  if (!width) {
    return <th {...restProps} />
  }

  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span
          // className={css['react-resizable-handle']}
          style={{
            position: 'absolute',
            right: '-5px',
            bottom: '0',
            zIndex: '1',
            width: '10px',
            height: '100%',
            cursor: 'col-resize'
          }}
          onClick={(e) => {
            e.stopPropagation()
          }}
        />
      }
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  )
}

export default Index
